<template>
  <div class="main">
    <nav-bar class="home-nav">
      <div class="left" slot="left" @click="goBack">
        <van-icon name="arrow-left" size="24"/>
      </div>
      <div slot="center">溯源码管理</div>
    </nav-bar>

    <div class="item_box">
      <div class="flex_between border-bottom pd10">
        <span class="num">批次编号：{{batchInfo.uuid}}</span>
        <span class="num_date">{{batchInfo.create_date}}</span>
      </div>
      <div class="border-bottom flex_between fz14 pd10">
        <span class="">种植基地：<span class="color_main">{{batchInfo.base_name}}</span></span>
      </div>
      <div class="border-bottom flex_between fz14 pd10">
        <span class="">批次名称：<span class="color_main">{{batchInfo.name}}</span></span>
      </div>
      <div class="border-bottom flex_between fz14 pd10">
        <span>开始时间：<span class="color_main">{{batchInfo.start_time}}</span></span>
        <span>结束时间：<span class="color_main">{{batchInfo.end_time}}</span></span>
      </div>
      <div class="lk_detail">
        <div v-for="item in level" class="item_btn" @click="toDetail(item)"><span
          class="num">{{item.qrcode_num}}个</span><span>{{item.level_name}}</span></div>
      </div>
      <div class="create_code" @click="showPopup">生成溯源码</div>
    </div>

    <van-dialog v-model="show" title="生成溯源码" :beforeClose="beforeClose" show-cancel-button>
      <van-field
        v-model="qrcode_num"
        type="number"
        name="qrcode_num"
        label="数量"
        placeholder="请输入数量"
        :rules="[{ required: true, message: '请填写数量' }]"
      />

      <van-field
        readonly
        clickable
        name="picker"
        :value="value"
        label="等级"
        placeholder="点击选择等级"
        @click="showPicker = true"
      />

      <div class="switch-box">
        <span>是否生成防伪二维码：</span>
        <van-switch v-model="isAnti" size="18px" />
      </div>
    </van-dialog>

    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="columns"
        @confirm="onConfirm"
        @cancel="showPicker = false"
      />
    </van-popup>

  </div>
</template>

<script>
  import NavBar from "@/components/common/navbar/NavBar"

  export default {
    name: "qrcode",
    components: {
      NavBar
    },

    data() {
      return {
        isAnti: false,
        base_id: '',
        id: '',
        pid: '',
        level_id: '',
        show: false,
        qrcode_num: 0,
        value: '',
        columns: [],
        showPicker: false,
        batchInfo: {
          uuid: '',
          name: '',
          create_date: '',
          base_name: '',
          start_time: '',
          end_time: ''
        },
        level: '',
      }
    },

    created() {
      this.pid = this.$route.query.pid;
      this.base_id = this.$route.query.base_id;
      this.id = this.$route.query.bid;
      this.getLevel();
      this.getBatchInfo();
      this.getQrcodeNum();
    },

    methods: {
      getBatchInfo() {
        let that = this;
        that.$http.get('/api/MobileAadminApi/getBatchtDeail', {id: that.id}, r => {
          console.log(r)
          that.batchInfo = r.data;
        })
      },

      getLevel() {
        let that = this;
        that.$http.get('/api/MobileAadminApi/getLevelList', null, r => {
          console.log('等级r', r)
          let columns = [];
          r.data.map(item => {
            let Obj = {};
            Obj['id'] = item.id;
            Obj['text'] = item.name
            columns.push(Obj);
            // return columns;
          })
          that.columns = columns;
        })
      },

      getQrcodeNum() {
        let that = this;
        that.$http.get('/api/MobileAadminApi/getQrcodeNum', {batch_id: that.id}, r => {
          console.log('等级数：', r)
          that.level = r.data;
        })
      },

      beforeClose(action, done) {
        let that = this;
        if (action === 'confirm') {
          if (that.qrcode_num == 0) {
            that.$toast('生成数量不能为0！');
            done(false);
            return;
          }
          if (that.level_id == '') {
            that.$toast('请选择等级！');
            done(false);
            return;
          }
           let status='';
          if(that.isAnti){
            status = 1
          }else{
            status = 2
          }
          console.log('11that.isAnti:',that.isAnti)

          const params = {
            base_id: that.base_id,
            batch_id: that.id,
            level_id: that.level_id,
            numbers: that.qrcode_num,
            status:status
          };
          console.log('params', params);

          that.$http.post('/api/MobileAadminApi/setQrcode', params, r => {
            console.log('生成溯源：', r)
            this.$router.replace({
              path: '/refresh',
              query: {
                pid: that.pid,
                bid: that.id,
                base_id: that.base_id,
                t: Date.now()
              }
            });
            setTimeout(done, 500);
            that.$toast(r.info)
          });
        } else {
          done();
        }
      },

      goBack() {
        this.$router.go(-1);
      },

      showPopup() {
        this.show = true
      },

      onConfirm(value) {
        this.value = value['text'];
        this.level_id = value['id'];
        this.showPicker = false;
      },

      toDetail(e) {
        console.log(e)
        this.$router.push({path: '/qrcodeDetail', query: {batch_id: this.id, level_id: e.level_id}})
      }

    },
  }
</script>

<style scoped>
  .item_box {
    margin: 10px;
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden
  }

  .flex_between {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .switch-box{
    padding:10px 10px 10px 15px;
    display: flex;
    align-items: center;
    font-size: 14px;
  }
  .num {
    font-size: .32rem;
    color: #000000;
  }

  .num_date {
    font-size: .28rem;
  }

  .lk_detail {
    display: flex;
    justify-content: space-around;
    font-size: .32rem;
    text-align: center;
  }

  .lk_detail .item_btn:not(:last-child) {
    border-right: 1px solid #eee;
  }

  .item_btn {
    flex: 1;
    padding: 8px;
  }

  .item_btn span {
    display: block;
    text-align: center;
    font-size: .28rem;
    line-height: 1.3;
  }

  .item_btn .num {
    font-weight: bold;
    color: var(--color-tint);
  }

  .create_code {
    height: .8rem;
    line-height: .8rem;
    font-size: .36rem;
    color: #ffffff;
    text-align: center;
    background: var(--color-tint);
  }
</style>
